@for $i from 1 through 50{
	.ml-#{$i}{
		margin-left: 1px * $i;
	}
	.mr-#{$i}{
		margin-right: 1px * $i;
	}
	.mt-#{$i}{
		margin-top: 1px * $i;
	}
	.mb-#{$i}{
		margin-bottom: 1px * $i;
	}
	.pl-#{$i}{
		padding-left: 1px * $i;
	}
	.pr-#{$i}{
		padding-right: 1px * $i;
	}
	.pt-#{$i}{
		padding-top: 1px * $i;
	}
	.pb-#{$i}{
		padding-bottom: 1px * $i;
	}
}

@for $i from 1 through 100{
	.wpx-#{$i}{
		width: 1px * $i * 10;
	}
	.hpx-#{$i}{
		height: 1px * $i * 10;
	}
}

@for $i from 1 through 100{
	.wp-#{$i}{
		width:  1% * $i;
	}
	.hp-#{$i}{
		height: 1% * $i;
	}
}

@for $i from 1 through 100{
	.wv-#{$i}{
		width:  1vw * $i;
	}
	.hv-#{$i}{
		height: 1vh * $i;
	}
}
.flex{
	display: flex;
}
.flex-1{
	flex: 1;
}
.al-center{
	align-items: center;
}
.ju-spa-bet{
	justify-content: space-between;
}
.fl{
	float: left;
}
.fr{
	float: right;
}
.cr{
	cursor: pointer;
}